<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/harmonise.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
<title>Sample for 'basic' style sheet</title>
</head>
<body style="margin:0 10%">

<!-- This sample was based on that created for Tripoli http://www.monc.se/tripoli/ -->

<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

<h1>Level 1 heading</h1>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

<h2>Level 02 Heading</h2>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<h3>Level 03 Heading</h3>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<h4>Level 04 Heading</h4>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<h5>Level 05 Heading</h5>

<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<h6>Level 06 Heading</h6>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
<blockquote><p>Paragraph inside Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.</p></blockquote>

<address>Address: Example address 224, Sweden</address>

<pre><strong>Preformated:</strong>Testing one row
     and another</pre>

<p>
I am <a href="?abc123">the a tag</a> example<br />

I am <abbr title="test">the abbr tag</abbr> example<br />
I am <acronym>the acronym tag</acronym> example<br />
I am <big>the big tag</big> example<br />

I am <cite>the cite tag</cite> example<br />
I am <code>the code tag</code> example<br />
I am <del>the del tag</del> example<br />
I am <dfn>the dfn tag</dfn> example<br />

I am <em>the em tag</em> example<br />
I am <i>the i tag</i> example<br />
I am <ins>the ins tag</ins> example<br />

I am <kbd>the kbd tag</kbd> example<br />
I am <q>the q tag <q>inside</q> a q tag</q> example<br />
I am <s>the s tag</s> example<br />
I am <samp>the samp tag</samp> example<br />

I am <small>the small tag</small> example<br />
I am <span>the span tag</span> example<br />
I am <strike>the strike tag</strike> example<br />
I am <strong>the strong tag</strong> example<br />

I am <sub>the sub tag</sub> example<br />
I am <sup>the sup tag</sup> example<br />
I am <tt>the tt tag</tt> example<br />
I am <var>the var tag</var> example<br />

I am <u>the u tag</u> example
</p>

<hr />
<p>(that was an hr)</p>

<ul>
	<li>Unordered list 01</li>
	<li>Unordered list 02</li>
	<li>Unordered list 03
		<ul>
			<li>Unordered list inside list level 2</li>

			<li>Unordered list inside list level 2
				<ul>
					<li>Unordered list inside list level 3</li>
					<li>Unordered list inside list level 3</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Unordered list 04</li>
</ul>

<div class="prose">
<h4>'prose' div</h4>
<ul>
	<li>Unordered list 01</li>
	<li>Unordered list 02</li>
	<li>Unordered list 03
		<ul>
			<li>Unordered list inside list level 2</li>

			<li>Unordered list inside list level 2
				<ul>
					<li>Unordered list inside list level 3</li>
					<li>Unordered list inside list level 3</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Unordered list 04</li>
	<li><p>Unordered list 05 containing a paragraph</p></li>
	<li><p>Unordered list 06 containing a paragraph</p></li>
	<li>Unordered list 07</li>
</ul>
</div>

<ol>
	<li>Ordered list 01</li>
	<li>Ordered list 02</li>
	<li>Ordered list 03
		<ol>
			<li>Ordered list inside list level 2</li>
			<li>Ordered list inside list level 2
				<ol>

					<li>Ordered list inside list level 3</li>
					<li>Ordered list inside list level 3</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>Ordered list 04</li>
	<li><p>Ordered list 05 containing a paragraph</p></li>
	<li><p>Ordered list 06 containing a paragraph</p></li>
	<li>Ordered list 07</li>
</ol>

<dl>
	<dt>Definition list title 01</dt>
	<dd>Definition list description 01</dd>

	<dt>Definition list title 02</dt>
	<dd>Definition list description 02</dd>
	<dd>Definition list description 03</dd>
</dl>

<table>
	<caption>Table Caption</caption>

	<thead>
		<tr>
			<th>Table head th</th>
			<th>Table head th</th>
			<th>Table head th</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Table body th</th>
			<td>Table body td</td>
			<td>Table body td</td>
		</tr>
		<tr>
			<th>Table body th</th>
			<td>Table body td</td>
			<td>Table body td</td>
		</tr>
		<tr>
			<th>Table body th</th>
			<td>Table body td</td>
			<td>Table body td</td>
		</tr>
	</tbody>
</table>


<form action="#" method="post">

	<div class="text-container container">
		<label for="f1">Short</label>
		<input type="text" id="f1" name="f1" class="short" size="5" />
		<em class="help">Handy little help message</em>
	</div>

	<div class="text-container container">
		<label for="f2">Medium</label>
		<input type="text" id="f2" name="f2" class="medium" size="20" />
		<em class="help">Handy little help message</em>
	</div>

	<div class="text-container container">
		<label for="f3">Long</label>
		<input type="text" id="f3" name="f3" class="long" size="50" />
		<em class="help">Handy little help message</em>
	</div>

	<div class="textarea-container container">
		<label for="f4">Textarea</label>
		<textarea rows="5" cols="50" id="f4" name="f4"></textarea>
		<em class="help">Handy little help message</em>
	</div>

	<div class="multi-container container">
		<p class="meta-label">Date</p>
		<label for="day">Day</label>
		<input type="text" id="day" name="day" class="short" />
		<label for="month">Month</label>
		<input type="text" id="month" name="month" class="short" />
		<label for="year">Year</label>
		<input type="text" id="year" name="year" class="short" />
		<em class="help">Handy little help message</em>
	</div>
	
	<div class="select-container container">
		<label for="day2">Date</label>
		<select id="day2" title="day" name="day2">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="23">23</option>
			<option value="24">24</option>
			<option value="25">25</option>
			<option value="26">26</option>
			<option value="27">27</option>
			<option value="28">28</option>
			<option value="29">29</option>
			<option value="30">30</option>
			<option value="31">31</option>
		</select>
		<select title="month" name="month2">
			<option value="1">January</option>
			<option value="2">February</option>
			<option value="3">March</option>
			<option value="4">April</option>
			<option value="5">May</option>
			<option value="6">June</option>
			<option value="7">July</option>
			<option value="8">August</option>
			<option value="9">September</option>
			<option value="10">October</option>
			<option value="11">November</option>
			<option value="12">December</option>
		</select>
		<select title="year" name="year2">
			<option value="2007">2007</option>
			<option value="2006">200</option>
			<option value="2005">200</option>
			<option value="2004">200</option>
			<option value="2003">200</option>
			<option value="2002">200</option>
			<option value="2001">200</option>
			<option value="2000">2000</option>
			<option value="1999">1999</option>
			<option value="1998">1998</option>
			<option value="1997">1997</option>
			<option value="1996">1996</option>
			<option value="1995">1995</option>
			<option value="1994">1994</option>
			<option value="1993">1993</option>
			<option value="1992">1992</option>
			<option value="1991">1991</option>
			<option value="1990">1990</option>
			<option value="1989">1989</option>
			<option value="1988">1988</option>
			<option value="1987">1987</option>
			<option value="1986">1986</option>
			<option value="1985">1985</option>
			<option value="1984">1984</option>
			<option value="1983">1983</option>
			<option value="1982">1982</option>
			<option value="1981">1981</option>
			<option value="1980">1980</option>
			<option value="1979">1979</option>
			<option value="1978">1978</option>
			<option value="1977">1977</option>
			<option value="1976">1976</option>
			<option value="1975">1975</option>
			<option value="1974">1974</option>
			<option value="1973">1973</option>
			<option value="1972">1972</option>
			<option value="1971">1971</option>
			<option value="1970">1970</option>
			<option value="1969">1969</option>
			<option value="1968">1968</option>
			<option value="1967">1967</option>
			<option value="1966">1966</option>
			<option value="1965">1965</option>
			<option value="1964">1964</option>
			<option value="1963">1963</option>
			<option value="1962">1962</option>
			<option value="1961">1961</option>
			<option value="1960">1960</option>
		</select>
		<em class="help">Handy little help message</em>
	</div>

	<div class="radio-container container">
		<p class="meta-label">Choose a radio button</p>
		<label for="radio_1"><input type="radio" id="radio_1" name="radio" value="1" /> radio option 1</label>
		<label for="radio_2"><input type="radio" id="radio_2" name="radio" value="2" /> radio option 2</label>
		<label for="radio_3"><input type="radio" id="radio_3" name="radio" value="3" /> radio option 3</label>
		<em class="help">Handy little help message</em>
	</div>

	<div class="checkbox-container compact container">
		<p class="meta-label">Check some compact checkboxes</p>
		<label for="checkbox_1"><input type="checkbox" id="checkbox_1" name="checkbox" value="1" /> checkbox option 1</label>
		<label for="checkbox_2"><input type="checkbox" id="checkbox_2" name="checkbox" value="2" /> checkbox option 2</label>
		<label for="checkbox_3"><input type="checkbox" id="checkbox_3" name="checkbox" value="3" /> checkbox option 3</label>
		<em class="help">Handy little help message</em>
	</div>

	<div class="file-container container">
		<label for="file">File upload</label>
		<input type="file" id="file" name="file" />
		<em class="help">Handy little help message</em>
	</div>
	
	<fieldset>
	<legend>Fieldset</legend>
		<div class="text-container container">
			<label for="f21">Short</label>
			<input type="text" id="f21" name="f21" class="short" size="5" />
			<em class="help">Handy little help message</em>
		</div>
	
		<div class="text-container container">
			<label for="f22">Medium</label>
			<input type="text" id="f22" name="f22" class="medium" size="20" />
			<em class="help">Handy little help message</em>
		</div>
	
		<div class="text-container container">
			<label for="f33">Long</label>
			<input type="text" id="f33" name="f33" class="long" size="50" />
			<em class="help">Handy little help message</em>
		</div>
	</fieldset>

	<div class="button-container container">
		<input type="submit" value="Submit" />
	</div>

	<div class="button-container container">
		<input type="submit" class="cancel" value="Cancel" />
	</div>

	<div class="button-container container">
		<button class="link"><span>Button which looks like a link</span></button>
	</div>
		
</form>

<!-- end sample HTML -->
</body>
</html>
